<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>原型 原型链 | 一只老鸟</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/img/rty-docs.ico">
    <script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-145250139-1"></script>
    <script>window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'UA-145250139-1');</script>
    <script>var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?96bef00c01d8ee7ee249abc380b9e5ab";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();</script>
    <meta name="description" content="Welcome to my docs">
    <meta name="keywords" content="jkx,晋凯旋,jkxxmd,vue,js,html,css,英文歌曲,bruno">
    
    <link rel="preload" href="/assets/css/0.styles.eb327ba5.css" as="style"><link rel="preload" href="/assets/js/app.2b0e3d52.js" as="script"><link rel="preload" href="/assets/js/2.87232f21.js" as="script"><link rel="preload" href="/assets/js/41.0b071795.js" as="script"><link rel="prefetch" href="/assets/js/10.1e2b3af9.js"><link rel="prefetch" href="/assets/js/11.bfd5eea1.js"><link rel="prefetch" href="/assets/js/12.11b2a8d0.js"><link rel="prefetch" href="/assets/js/13.d230b1b6.js"><link rel="prefetch" href="/assets/js/14.8208356f.js"><link rel="prefetch" href="/assets/js/15.badc1e67.js"><link rel="prefetch" href="/assets/js/16.76e6aeba.js"><link rel="prefetch" href="/assets/js/17.ea4ddef2.js"><link rel="prefetch" href="/assets/js/18.e3d36bd1.js"><link rel="prefetch" href="/assets/js/19.aa1bac84.js"><link rel="prefetch" href="/assets/js/20.838765cd.js"><link rel="prefetch" href="/assets/js/21.14466225.js"><link rel="prefetch" href="/assets/js/22.38392bba.js"><link rel="prefetch" href="/assets/js/23.71895fbc.js"><link rel="prefetch" href="/assets/js/24.766c8a49.js"><link rel="prefetch" href="/assets/js/25.6b02ff9f.js"><link rel="prefetch" href="/assets/js/26.ef22337a.js"><link rel="prefetch" href="/assets/js/27.0334ed21.js"><link rel="prefetch" href="/assets/js/28.811fb438.js"><link rel="prefetch" href="/assets/js/29.f687b8ad.js"><link rel="prefetch" href="/assets/js/3.3fc78177.js"><link rel="prefetch" href="/assets/js/30.0eef1a68.js"><link rel="prefetch" href="/assets/js/31.44dad2fc.js"><link rel="prefetch" href="/assets/js/32.959ca33d.js"><link rel="prefetch" href="/assets/js/33.d27370cb.js"><link rel="prefetch" href="/assets/js/34.73319d5f.js"><link rel="prefetch" href="/assets/js/35.09513538.js"><link rel="prefetch" href="/assets/js/36.c77663c8.js"><link rel="prefetch" href="/assets/js/37.89852ede.js"><link rel="prefetch" href="/assets/js/38.a9026d97.js"><link rel="prefetch" href="/assets/js/39.2cb07eac.js"><link rel="prefetch" href="/assets/js/4.50419328.js"><link rel="prefetch" href="/assets/js/40.7694c8be.js"><link rel="prefetch" href="/assets/js/42.731a77fd.js"><link rel="prefetch" href="/assets/js/43.e340c04a.js"><link rel="prefetch" href="/assets/js/44.32723933.js"><link rel="prefetch" href="/assets/js/45.fddbc294.js"><link rel="prefetch" href="/assets/js/46.7227ca9a.js"><link rel="prefetch" href="/assets/js/47.e445b894.js"><link rel="prefetch" href="/assets/js/48.22f08eaa.js"><link rel="prefetch" href="/assets/js/49.1ee7be95.js"><link rel="prefetch" href="/assets/js/5.f4c7dd9b.js"><link rel="prefetch" href="/assets/js/50.620525ff.js"><link rel="prefetch" href="/assets/js/51.23ef9c37.js"><link rel="prefetch" href="/assets/js/52.ab599220.js"><link rel="prefetch" href="/assets/js/53.6f0a5a12.js"><link rel="prefetch" href="/assets/js/54.0af9ce80.js"><link rel="prefetch" href="/assets/js/55.9a619ce4.js"><link rel="prefetch" href="/assets/js/56.d3eb58e2.js"><link rel="prefetch" href="/assets/js/57.cec694aa.js"><link rel="prefetch" href="/assets/js/58.215ff512.js"><link rel="prefetch" href="/assets/js/59.67b4a2d9.js"><link rel="prefetch" href="/assets/js/6.35564b30.js"><link rel="prefetch" href="/assets/js/60.10fa328d.js"><link rel="prefetch" href="/assets/js/61.eb384a7b.js"><link rel="prefetch" href="/assets/js/62.21995735.js"><link rel="prefetch" href="/assets/js/63.d3376937.js"><link rel="prefetch" href="/assets/js/64.9dc17e46.js"><link rel="prefetch" href="/assets/js/65.faaf4be5.js"><link rel="prefetch" href="/assets/js/66.82d4fd2e.js"><link rel="prefetch" href="/assets/js/67.766e8bbb.js"><link rel="prefetch" href="/assets/js/68.e00a5e5f.js"><link rel="prefetch" href="/assets/js/69.0f9198d3.js"><link rel="prefetch" href="/assets/js/7.826495ef.js"><link rel="prefetch" href="/assets/js/70.05ef2cdd.js"><link rel="prefetch" href="/assets/js/71.0da0e95b.js"><link rel="prefetch" href="/assets/js/72.fd1cda42.js"><link rel="prefetch" href="/assets/js/73.907aa3c6.js"><link rel="prefetch" href="/assets/js/74.dec02a91.js"><link rel="prefetch" href="/assets/js/75.8610ce53.js"><link rel="prefetch" href="/assets/js/76.db9000c6.js"><link rel="prefetch" href="/assets/js/77.fa0311a2.js"><link rel="prefetch" href="/assets/js/78.33ae2bd0.js"><link rel="prefetch" href="/assets/js/79.879fa638.js"><link rel="prefetch" href="/assets/js/8.7a30ba0c.js"><link rel="prefetch" href="/assets/js/80.898b981f.js"><link rel="prefetch" href="/assets/js/81.b606e1f8.js"><link rel="prefetch" href="/assets/js/82.5006eb1e.js"><link rel="prefetch" href="/assets/js/83.604f41d2.js"><link rel="prefetch" href="/assets/js/84.2e649063.js"><link rel="prefetch" href="/assets/js/85.50f34442.js"><link rel="prefetch" href="/assets/js/86.aee7b865.js"><link rel="prefetch" href="/assets/js/87.9b812977.js"><link rel="prefetch" href="/assets/js/88.52e08a6c.js"><link rel="prefetch" href="/assets/js/9.7b6af510.js">
    <link rel="stylesheet" href="/assets/css/0.styles.eb327ba5.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">一只老鸟</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/components/introduction.html" class="nav-link">
  VUE
</a></div><div class="nav-item"><a href="/english/introduction.html" class="nav-link">
  Javascript
</a></div><div class="nav-item"><a href="/music/introduction.html" class="nav-link">
  Html5
</a></div><div class="nav-item"><a href="/oral/introduction.html" class="nav-link">
  CSS
</a></div> <a href="https://github.com/jgsrty/jgsrty.github.docs" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/components/introduction.html" class="nav-link">
  VUE
</a></div><div class="nav-item"><a href="/english/introduction.html" class="nav-link">
  Javascript
</a></div><div class="nav-item"><a href="/music/introduction.html" class="nav-link">
  Html5
</a></div><div class="nav-item"><a href="/oral/introduction.html" class="nav-link">
  CSS
</a></div> <a href="https://github.com/jgsrty/jgsrty.github.docs" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><a href="/english/introduction.html" class="sidebar-link">导读</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>2019十二月(December)</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/english/2019/2019-December/What Is a Calorie.html" class="sidebar-link">对象：{ }</a></li><li><a href="/english/2019/2019-December/Why Is Water so Important.html" class="sidebar-link">水为何如此重要</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019十一月(November)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019十月(October)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019九月(September)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019八月(August)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019七月(July)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019六月(June)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年五月(May)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年四月(April)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年三月(March)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年二月(Feburary)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年一月(January)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2018年十二月(December)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2018年十一月(November)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>2018年十月(October)</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/english/2018/2018-October/Kindness is more important than Clever.html" class="active sidebar-link">原型 原型链</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/english/2018/2018-October/Kindness is more important than Clever.html#原型链继承的缺点" class="sidebar-link">原型链继承的缺点</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/english/2018/2018-October/Kindness is more important than Clever.html#借用构造函数-类式继承" class="sidebar-link">借用构造函数（类式继承）</a></li><li class="sidebar-sub-header"><a href="/english/2018/2018-October/Kindness is more important than Clever.html#组合式继承" class="sidebar-link">组合式继承</a></li></ul></li><li class="sidebar-sub-header"><a href="/english/2018/2018-October/Kindness is more important than Clever.html#js原型与原型链浅析" class="sidebar-link">js原型与原型链浅析</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/english/2018/2018-October/Kindness is more important than Clever.html#什么是原型链" class="sidebar-link">什么是原型链</a></li><li class="sidebar-sub-header"><a href="/english/2018/2018-October/Kindness is more important than Clever.html#原型与原型链的几个要点" class="sidebar-link">原型与原型链的几个要点</a></li></ul></li><li class="sidebar-sub-header"><a href="/english/2018/2018-October/Kindness is more important than Clever.html#原型链的应用" class="sidebar-link">原型链的应用</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/english/2018/2018-October/Kindness is more important than Clever.html#思考-为什么通用方法写入原型链中比直接写在构造函数中更好" class="sidebar-link">思考:为什么通用方法写入原型链中比直接写在构造函数中更好？</a></li></ul></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="原型-原型链"><a href="#原型-原型链" class="header-anchor">#</a> 原型 原型链</h1> <ol><li>借用构造函数继承，使用call或apply方法，将父对象的构造函数绑定在子对象上</li> <li>原型继承，将子对象的prototype指向父对象的一个实例</li> <li>组合继承</li></ol> <h2 id="原型链继承的缺点"><a href="#原型链继承的缺点" class="header-anchor">#</a> 原型链继承的缺点</h2> <p>字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型
传递参数。</p> <h3 id="借用构造函数-类式继承"><a href="#借用构造函数-类式继承" class="header-anchor">#</a> 借用构造函数（类式继承）</h3> <p>借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。</p> <h3 id="组合式继承"><a href="#组合式继承" class="header-anchor">#</a> 组合式继承</h3> <p>组合式继承是比较常用的一种继承方法，其背后的思路是使用原型链实现对原型
属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在
原型上定义方法实现了函数复用，又保证每个实例都有它自己的属性。</p> <h2 id="js原型与原型链浅析"><a href="#js原型与原型链浅析" class="header-anchor">#</a> js原型与原型链浅析</h2> <p>原型 和原型链</p> <h3 id="什么是原型链"><a href="#什么是原型链" class="header-anchor">#</a> 什么是原型链</h3> <p>本质：原型链是用来实现js对象继承的方式
简单理解就是原型组成的链，对象的__proto__它的是原型，而原型也是一个对象，也有__proto__属性，原型的
__proto__又是原型的原型，就这样可以一直通过__proto__想上找，这就是原型链，当向上找找到Object的原型
的时候，这条原型链就算到头了。</p> <h3 id="原型与原型链的几个要点"><a href="#原型与原型链的几个要点" class="header-anchor">#</a> 原型与原型链的几个要点</h3> <p>每一个函数都有一个prototype属性 和 一个 <strong>proto__属性。
每一个对象都有一个__proto__属性 。
（除null）所有的对象都是由构造函数创建的。
对象的__proto</strong> === 该对象的构造函数的prototype （ [].proto === Array.prototype）
对象的__proto__ 也是一个对象，所以对象的__proto__的__proto__ === Object.prototype
null位于原型链最顶层
Function.proto === Function.prototype。 这是一个先有蛋还是先有鸡的问题
null 没有__proto__ 和 prototype
所有原型链属性传递方向 （某个属性在本对象中找不到时候，会到原型链上去找）： 先找对象 本身属性
=》构造函数的prototype中属性 =》Object.prototype中的属性=》null （结束）
例子：</p> <div class="language- extra-class"><pre class="language-text"><code>function Person(){
this.name = name;
this.age = age;
}
Person.prototype.talk = function(){
console.log(&quot;hello&quot;);
}
let ming = new Person(&quot;ming&quot;,24);//ming === {name:&quot;ming&quot;,age:24}
</code></pre></div><p>ming.talk(); // ming中没有talk这个属性，就会通过__proto__到到原型链中去找，ming.<strong>proto</strong> ===
Person.prototype。
//由于ming.__proto__也就是 Person.prototype 也是一个对象，所以 ming.<strong>proto</strong>.<strong>proto</strong> ===
Object.prototype。（如果ming.__proto__中没有找到talk属性会继续向上找ming.<strong>proto</strong>.<strong>proto</strong> ，
直到找到最顶层null）</p> <h2 id="原型链的应用"><a href="#原型链的应用" class="header-anchor">#</a> 原型链的应用</h2> <p>通过一个构造函数创建出来的多个实例，如果都要添加一个方法，给每个实例去添加并不是一个明智的选择。这
时就该用上原型了。
在实例的原型上添加一个方法，这个原型的所有实例便都有了这个方法。
例子：给所有的function 添加一个 before属性 和 after属性</p> <div class="language- extra-class"><pre class="language-text"><code>Function.prototype.before = function(beforeFn){
let functionObj = this;
return function (){
beforeFn.apply(this,arguments);
functionObj.apply(this,arguments);
}
}
Function.prototype.after = function(afterFn){
let functionObj = this;
return function (){
functionObj.apply(this,arguments);
afterFn();
}
}
function test(){
console.log('this is a test function!');
}
let test1 = test.before(function(){
console.log(arguments);
console.log('before');
}).after(()=&gt;{
console.log('after');
});
test1();
</code></pre></div><h3 id="思考-为什么通用方法写入原型链中比直接写在构造函数中更好"><a href="#思考-为什么通用方法写入原型链中比直接写在构造函数中更好" class="header-anchor">#</a> 思考:为什么通用方法写入原型链中比直接写在构造函数中更好？</h3> <p>//例子1</p> <div class="language- extra-class"><pre class="language-text"><code>function Animal (){
this.speak = function(){}//第一种，直接将方法写入构造函数中
}
Animal.prototype.speak = function(){};//第二种将方法写到原型链中
let dog1 = new Animal();
let dog2 = new Animal();
console.log (dog1.speak === dog2.speak) //第一种，返回false，第二种返回true
</code></pre></div><p>总结：假如将方法写入构造函数中，每一次实例化都会去创建这样一个功能完全相同的函数，会非常耗费内存，
而写入原型链中只会创建一次，所以建议通常情况下将实例方法写到原型链中。
一个原型与原型链的图解</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/jgsrty/jgsrty.github.docs/edit/master/docs/english/2018/2018-October/Kindness is more important than Clever.md" target="_blank" rel="noopener noreferrer">Edit this page</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">12/23/2020, 4:59:13 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/english/2018/2018-November/World Inequality and Complexity 2.html" class="prev">
        js最全面的数组操作合集
      </a></span> <!----></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.2b0e3d52.js" defer></script><script src="/assets/js/2.87232f21.js" defer></script><script src="/assets/js/41.0b071795.js" defer></script>
  </body>
</html>
